<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .item{
        background-color: orange;
        margin-top: 5px;
      }
      .item .title{
        color: red;
      }
    </style>
</head>
<body>
    <div id="app">
        <!-- 1.电影列表进行渲染 -->
        <h2>电影列表</h2>
        <ul>
          <li v-for="item in movies">{{item}}</li>
        </ul>

        <!-- 2.电影列表同时有索引 -->
        <ul>
          <li v-for="(movie, index) in movies">{{index+1}}-{{movie}}</li>
        </ul>

        <!-- 3.遍历数组复杂数据 -->
        <h2>商品列表</h2>
        <div class="item" v-for="item in products">
          <h3 class="title">商品：{{item.name}}</h3>
          <span>价格：{{item.price}}</span>
          <p>秒杀：{{item.desc}}</p>
        </div>
    </div>

    <script src="./lib/Vue.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return{
                  movies:["星际穿越","少年派","大话西游","哆啦A梦"],

                  // 2.数组：存放的是对象
                  products:[
                    {id:110,name:'Macbook',price:9.9,desc:'9.9秒杀，快来抢购'},
                    {id:111,name:'iphone',price:9.9,desc:'6.9秒杀，快来抢购'},
                    {id:112,name:'小米',price:9.9,desc:'7.9秒杀，快来抢购'},
                    {id:113,name:'华为',price:9.9,desc:'4.9秒杀，快来抢购'},
                  ]
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>